<template>
  <div class="toolbar">
    <el-link :disabled="!canUndo">
      <el-tooltip effect="dark" content="撤销" placement="right">
        <i class="raderfont rader-icon-a-revoke" @click="onUndo"></i>
      </el-tooltip>
    </el-link>
    <el-link :disabled="!canRedo">
      <el-tooltip effect="dark" content="重做" placement="right">
        <i class="raderfont rader-icon-next" @click="onRedo"></i>
      </el-tooltip>
    </el-link>
    <el-tooltip effect="dark" content="放大" placement="right">
      <i class="raderfont rader-icon-amplify" @click="zoomIn"></i>
    </el-tooltip>
    <el-tooltip effect="dark" content="缩小" placement="right">
      <i class="raderfont rader-icon-reduce" @click="zoomOut"></i>
    </el-tooltip>
    <el-tooltip effect="dark" content="全屏" placement="right">
      <i class="raderfont rader-icon-full-screen" @click="toFullScreen"></i>
    </el-tooltip>
  </div>
</template>

<script lang="ts" setup>
import { History } from '@antv/x6-plugin-history';
import { defineProps, onMounted, ref, nextTick, PropType } from 'vue';
import { Graph } from '@antv/x6';
const props = defineProps({
  graph: {
    type: Object as PropType<Graph | null>, // 使用类型断言
    default: null, // 默认值为 null，而不是一个空对象
  },
  parentRoot: {
    type: Object,
  },
});
const graphObj = ref<Graph | null>(null); // 使用 Graph | null 类型
const canUndo = ref(false);
const canRedo = ref(false);
onMounted(() => {
  nextTick(() => {
    graphObj.value = props.graph;
    graphHistory();
  });
});
// 撤销重做
const graphHistory = () => {
  if (graphObj.value) {
    // 确保 graphObj.value 存在
    graphObj.value.use(
      new History({
        enabled: true,
      }),
    );
    graphObj.value.on('history:change', () => {
      if (graphObj.value) {
        canUndo.value = graphObj.value.canUndo();
        canRedo.value = graphObj.value.canRedo();
      }
    });
  }
};
// 撤销
const onUndo = () => {
  if (graphObj.value) {
    graphObj.value.undo();
  }
};
// 重做
const onRedo = () => {
  if (graphObj.value) {
    graphObj.value.redo();
  }
};
// 放大
const zoomIn = () => {
  if (graphObj.value) {
    graphObj.value.zoom(0.2);
  }
};
// 缩小
const zoomOut = () => {
  if (graphObj.value) {
    graphObj.value.zoom(-0.2);
  }
};
// 全屏
const toFullScreen = () => {
  document.fullscreenElement ? document.exitFullscreen() : fullScreen();
};
const fullScreen = () => {
  if (props.parentRoot) {
    const parentRootEl = props.parentRoot;
    if (parentRootEl.requestFullscreen) {
      parentRootEl.requestFullscreen();
    } else if (parentRootEl.mozRequestFullScreen) {
      parentRootEl.mozRequestFullScreen();
    } else if (parentRootEl.webkitRequestFullScreen) {
      parentRootEl.webkitRequestFullScreen();
    } else if (parentRootEl.msRequestFullscreen) {
      parentRootEl.msRequestFullscreen();
    }
  }
};
const exitFullscreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen();
    // 兼容Firefox
  } else if ((document as any).mozCancelFullScreen) {
    (document as any).mozCancelFullScreen();
    // 兼容Chrome, Safari and Opera等
  } else if ((document as any).webkitExitFullscreen) {
    (document as any).webkitExitFullscreen();
    // 兼容IE/Edge
  } else if ((document as any).msExitFullscreen) {
    (document as any).msExitFullscreen();
  }
};
</script>
<style lang="scss" scoped>
.toolbar {
  z-index: 100;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.06);

  .el-button + .el-button {
    margin-left: 0px;
  }

  .el-button {
    margin: 5px 0px;
  }

  .el-button--text i {
    color: rgb(95 103 112);
  }

  i {
    font-size: 18px;
    margin: 5px 8px;
    // color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    &:hover {
      color: #1890ff;
    }
  }
  .layout-opts {
    list-style: none;
    padding: 0;
    text-align: center;
    li {
      cursor: pointer;
      font-size: 14px;
      line-height: 22px;
      color: #3c5471;
      &:hover {
        color: #1890ff;
      }
    }
  }
}
</style>
